<template>
  <div class="personal-info-container">
    <!-- 头部，包含头像和姓名 -->
    <div class="header">
      <Avatar size="large" :src="dataVo.userImage" />
      <h1>{{dataVo.userName}}</h1>
    </div>
    <!-- 卡片组件用于展示个人信息 -->
    <Card class="info-card">
      <div class="info-item">
        <span class="info-label">ID：</span>
        <span class="info-value">{{dataVo.userId}}</span>
      </div>
      <div class="info-item">
        <span class="info-label">手机号：</span>
        <span class="info-value">{{dataVo.unionMobile}}</span>
      </div>
      <div class="info-item">
        <span class="info-label">年龄：</span>
        <span class="info-value">23</span>
      </div>
      <div class="info-item">
        <span class="info-label">邮箱：</span>
        <span class="info-value">{{dataVo.personalEmail}}</span>
      </div>
      <div class="info-item">
        <span class="info-label">地区：</span>
        <span class="info-value">{{dataVo.provinceName + dataVo.cityName + dataVo.countyName}}</span>
      </div>
      <Button class="btn-xgmm" type="primary" shape="circle" @click="UpdatePwd">修改密码</Button>
    </Card>

    <Modal :footer-hide="true" v-model="dialogVisible" title="修改密码" width="30%">
      <Form :label-width="80">
        <FormItem label="旧密码">
          <Input v-model="dataForm.initKey" type="password" password placeholder="请输入旧密码" />
        </FormItem>
        <FormItem label="新密码">
          <Input v-model="dataForm.userKey" type="password" password placeholder="请输入新密码" />
        </FormItem>
        <FormItem label="新密码">
          <Input v-model="checkKey" type="password" password placeholder="再次输入新密码" />
        </FormItem>
      </Form>
      <div class="middle_btn">
        <Button type="primary" @click="Submit()">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'PersonalInfo',
  data() {
    return {
      dataVo: {},
      dataForm: {
        initKey: null,
        userKey: null,
      },
      checkKey: null,
      dialogVisible: false
    };
  },
  methods: {
    Init() {
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/user-src/personal/user/info',
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataVo = res.data.data
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: res.data.msg
            })
          }
        }
      }).get()
    },
    Submit() {
      if(!this.dataForm.initKey) {
        this.$Message.error('旧密码不能为空')
        return false
      }
      if(!this.dataForm.userKey) {
        this.$Message.error('新密码不能为空')
        return false
      }
      if(this.dataForm.userKey != this.checkKey) {
        this.$Message.error('新密码输入不一致')
        return false
      }
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/user-src/update/personal/password",
        data: {
          pojo: this.dataForm
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success('修改成功')
            this.dialogVisible = false
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).put()
    },
    UpdatePwd() {
      this.dialogVisible = true
    }
  },
  created() {
    this.Init()
  }
}
</script>

<style scoped>
.personal-info-container {
  padding: 20px;
  min-width: 500px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.info-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e9e9e9;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  width: 100px;
  font-weight: bold;
  color: #666;
}

.info-value {
  flex: 1;
  color: #333;
}

.btn-xgmm {
  display: block; margin: 20px auto;
}
</style>